<div class="input-wrapper">
  <input placeholder="Search..." type="text" class="input" />
  <svg
    stroke-width="2"
    stroke="currentColor"
    fill="none"
    viewBox="0 0 24 24"
    height="24"
    width="24"
    class="search-icon"
  >
    <circle r="8" cy="11" cx="11"></circle>
    <line y2="16.65" x2="16.65" y1="21" x1="21"></line>
  </svg>
  <svg
    stroke-width="2"
    stroke="currentColor"
    fill="none"
    viewBox="0 0 1792 1792"
    height="24"
    width="24"
    class="filter-icon"
  >
    <path
      d="M1595 295q17 41-14 70l-493 493v742q0 42-39 59-13 5-25 5-27 0-45-19l-256-256q-19-19-19-45v-486l-493-493q-31-29-14-70 17-39 59-39h1280q42 0 59 39z"
    ></path>
  </svg>
</div>

<style>
/* From Uiverse.io by TemRevil  - Tags:  */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input {
  min-width: 300px;
  padding: 20px 40px 20px 60px;
  background: #14213d;
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  outline: none;
  border: none;
  border-radius: 8px;
  box-shadow: 60px 40px 80px 0px #2d00f75b, -100px -40px 100px #db00b65b,
    inset -40px -20px 1000px -150px #db00b65b,
    inset 40px 20px 1000px -160px #2d00f7;
  transition: 0.2s 0s ease-in-out;
}

.input::placeholder {
  color: #f0f8ff9c;
  font-size: 20px;
}

.input:hover,
.input:focus {
  background: #dfe7fd;
  box-shadow: -100px -40px 100px 30px #2d00f75b, 60px 40px 100px 5px #db00b65b,
    inset 40px 20px 1000px -150px #f20089,
    inset -40px -20px 1000px -160px #2d00f7;
}

.search-icon {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  fill: #fff;
  stroke: #fff;
}

.filter-icon {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  fill: #fff;
  stroke: #fff;
  cursor: pointer;
  transition: 0.15s 0s ease-in-out;
}
.filter-icon:active {
  scale: 0.9;
}

.input:hover.search-icon,
.input:focus.search-icon,
.input:hover.filter-icon,
.input:focus.filter-icon {
  fill: #14213d;
  stroke: #14213d;
}

</style>
    